<template>
  <div id="father" >
    <el-row  style="display:flex;flex-wrap:wrap">
      <el-col :span="6">
        <div style="position: relative; border:1px solid #fff;width: 95.5%;height:150px;background: linear-gradient(-67.6938deg, rgb(111, 134, 214) 0%, rgb(72, 198, 239) 100%); border-radius: 8.5px;">
          <div style="color:#fff;margin:auto" >
            <div style="width:150px;margin-left:15px;margin-top:30px;">
                <p>今日订单数</p>
              <span style="display:inline-block;font-size:20px;">￥</span><span style="display:inline-block;font-size: 40px;font-weight: bold;">{{orderNum}}</span>
            </div>           
          </div>
          <div style="position:absolute;top:25px;right: 20px;">
              <el-icon size="120px" style="color:rgba(255,255,255,0.5)">
                <Tickets/>
              </el-icon>  
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="position: relative; border:1px solid #fff;width: 95.5%;height:100%;background: linear-gradient(-67.6938deg, rgb(255, 123, 87) 0%, rgb(245, 205, 16) 100%); border-radius: 8.5px;">
          <div style="color:#fff;margin:auto" >
            <div style="width:150px;margin-left:15px;margin-top:30px;">
                <p>今日销售额</p>
              <span style="display:inline-block;font-size:20px;">￥</span><span style="display:inline-block;font-size: 40px;font-weight: bold;">{{SalesOfTheDay}}</span>
            </div>           
          </div>
          <div style="position:absolute;top:25px;right: 20px;">
              <el-icon size="120px" style="color:rgba(255,255,255,0.5)">
                <Tickets/>
              </el-icon>  
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="position: relative; border:1px solid #fff;width: 95.5%;height:100%; background: linear-gradient(-67.6938deg, rgb(95, 114, 189) 0%, rgb(163, 63, 228) 100%); border-radius: 8.5px;">
          <div style="color:#fff;margin:auto" >
            <div style="width:150px;margin-left:15px;margin-top:30px;">
                <p>昨日销售额</p>
              <span style="display:inline-block;font-size:20px;">￥</span><span style="display:inline-block;font-size: 40px;font-weight: bold;">{{Yesterday}}</span>
            </div>           
          </div>
          <div style="position:absolute;top:25px;right: 20px;">
              <el-icon size="120px" style="color:rgba(255,255,255,0.5)">
                <Tickets/>
              </el-icon>  
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="position: relative; border:1px solid #fff;width: 95.5%;height:100%;background: linear-gradient(-67.6938deg, rgb(40, 140, 191) 0%, rgb(81, 210, 195) 100%); border-radius: 8.5px;">
          <div style="color:#fff;margin:auto" >
            <div style="width:170px;margin-left:15px;margin-top:30px;">
                <p>近7日总销售额</p>
              <span style="display:inline-block;font-size:20px;">￥</span><span style="display:inline-block;font-size: 40px;font-weight: bold;">{{Nearly7Days}}</span>
            </div>           
          </div>
          <div style="position:absolute;top:25px;right: 20px;">
              <el-icon size="120px" style="color:rgba(255,255,255,0.5)">
                <Tickets/>
              </el-icon>  
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card  id="father" class="box-card">
          <template #header>
            <div class="card-header">              
              <div style="display:inline-block;" class="title">
              <div style="width:5px;height:20px;float:left;background-color:#2E64FA;">
              </div>
              <span style="margin-left:5px">课程总览</span>
              </div>             
            </div>
          </template>
          <el-row>
            <el-col :span="6">
              <el-card class="course" shadow="hover">
                <h1 class="h3">{{ shelves }}</h1>已上架
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="course" shadow="hover">
                <h3 class="h3">{{ TheShelves }}</h3>已下架
              </el-card>
            </el-col>
<!--            <el-col :span="6">-->
<!--              <el-card class="course" shadow="hover">-->
<!--                <h3 class="h3">300</h3>已结课-->
<!--              </el-card>-->
<!--            </el-col>-->
            <el-col :span="6">
              <el-card class="course" shadow="hover">
                <h3 class="h3 all">{{couseTotal}}</h3>全部课程
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card id="father" class="box-card">
          <template #header>
            <div class="card-header">              
              <div style="display:inline-block;" class="title">
              <div style="width:5px;height:20px;float:left;background-color:#2E64FA;">
              </div>
              <span style="margin-left:5px">用户总览</span>
              </div>             
            </div>
          </template>
          <el-row>
            <el-col :span="6">
              <el-card class="course" shadow="hover">
                <h1 class="h3">{{ NewUsersToday }}</h1>今日新增
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="course" shadow="hover">
                <h3 class="h3">{{ YesterdayTotal }}</h3>昨日新增
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="course" shadow="hover">
                <h3 class="h3">{{ month }}</h3>本月新增
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="course" shadow="hover">
                <h3 class="h3 all">{{ userTotal }}</h3>用户总数
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>


    <el-row id="father">
      <el-col :span="18">
        <el-card style="margin-left:0;margin-top:20px;border-radius:10px ;font-family: 'Arial Black'">
          <template #header>
            <div class="card-header">              
              <div style="display:inline-block;" class="title">
              <div style="width:5px;height:20px;float:left;background-color:#2E64FA;">
              </div>
              <span style="margin-left:5px">待处理事务</span>
              </div>             
            </div>
          </template>
          <el-row style="border-radius:10px;text-align: center;">
            <el-col :span="6">
              <el-card>
                <div class="hover">
                  <el-row>
                    <el-col :span="12">
                      <a href="">已发布题目</a>
                    </el-col>
                    <el-col :span="12" style="height:40px;">
                      <span style="line-height: 40px">{{ publishedTopics }}</span>
                    </el-col>
                  </el-row>
                </div>
              </el-card>

            </el-col>

            <el-col :span="6">
              <el-card>
                <div class="hover">
                  <el-row>
                    <el-col :span="12"><a href="">已发布试卷</a></el-col>
                    <el-col :span="12" style="height:40px;"><span style="line-height: 40px">{{ publishedPapers }}</span></el-col>
                  </el-row>
                </div>
              </el-card>

            </el-col>

            <el-col :span="6">
              <el-card>
                <div class="hover">
                  <el-row>
                    <el-col :span="12"> <a href="">未发布试卷</a></el-col>
                    <el-col :span="12" style="height:40px;"><span style="line-height: 40px">{{ unpublishedTestPapers }}</span></el-col>
                  </el-row>
                </div>
              </el-card>

            </el-col>

            <el-col :span="6">
              <el-card>
                <div >
                  <el-row class="hover" >
                    <el-col :span="12"><a href="">未发布题目</a></el-col>
                    <el-col :span="12" style="height:40px;"><span style="line-height: 40px">{{ unpublishedTopic }}</span></el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="margin-left:39px;margin-right: 20px;margin-top:20px;border-radius:10px ;">
          <template #header>
            <div class="card-header">              
              <div style="display:inline-block;" class="title">
              <div style="width:5px;height:20px;float:left;background-color:#2E64FA;">
              </div>
              <span style="margin-left:5px">快捷运营入口</span>
              </div>             
            </div>
          </template>
          <el-row>
            <el-col class="QuickEntry" :span="6" @click="QuickAccessTo('用户管理')">
              <div style="padding-left:10px;padding-top:10px" >
                <div style="border-radius:40px;background-color:#409EFF;width:30px;height: 30px;margin-left: 15px">
                  <User color="#fff" />
                </div>
                <p>用户管理</p>
              </div>
            </el-col>
            <el-col class="QuickEntry" :span="6" @click="QuickAccessTo('权限管理')">
              <div style="padding-left:10px;padding-top:10px">
                <div style="border-radius:40px;background-color:#409EFF;width:30px;height: 30px;margin-left: 15px">
                  <SetUp color="#fff"></SetUp>
                </div>
                <p>权限管理</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <UserEchartsVue />
  </div>

</template>

<script setup>
import UserEchartsVue from "./UserEcharts.vue";
import axios from 'axios'
import { onMounted } from "@vue/runtime-core";
import store from "@/store";
import {ElMessage} from "element-plus";
import SubjectShowPage from "@/components/LeEn_questionBank/topic/subjectShow/subjectShowPage";

const { ref } = require("@vue/reactivity");


//已上架
let shelves=ref();
//已下架
let TheShelves=ref();
//全部课程
let couseTotal=ref();
//已发布试卷
let publishedPapers=ref();
//未发布试卷
let unpublishedTestPapers=ref();
//已发布题目
let publishedTopics=ref();
//未发布题目
let unpublishedTopic=ref();

let orderNum = ref(1024)
//今日销售额
let SalesOfTheDay = ref(1024)
let Yesterday = ref(1024)
let Nearly7Days = ref(1024)
let userTotal = ref();
let NewUsersToday = ref()
let YesterdayTotal = ref()
let month = ref();
let tok=ref(3)

function QuickAccessTo(name){
  if(name==='用户管理'){
    location.href='/userManagement';
  }else if(name==='权限管理'){
    location.href='/permission';
  }

}

onMounted(() => {
  //查询用户总览数据
  axios.get('/api/user/queryUserOverviewData')
  .then((rs) => {
    userTotal.value = rs.data.data.userTotal;
    NewUsersToday.value = rs.data.data.NewUsersToday;
    YesterdayTotal.value = rs.data.data.YesterdayTotal;
    month.value = rs.data.data.month
  }).catch((rs)=>{
    //token 失效

      })
  axios.get('/api/order/today').then((res)=>{
      orderNum.value = res.data.data.sum;
    SalesOfTheDay.value = res.data.data.money;
  })
  axios.get('/api/order/yesterday').then((res)=>{
    Yesterday.value = res.data.data.money;
  })
  axios.get('/api/order/sevenday').then((res) =>{
    Nearly7Days.value = res.data.data.money;
  })

  axios.get('/api/selectCourseCount').then((response)=>{
    shelves.value = response.data.data[0];
    TheShelves.value = response.data.data[1];
    couseTotal.value = shelves.value+TheShelves.value;
  })
  axios.get('/api/testPaper/selectCountNumber').then((rs)=>{
    //未发布题目
    unpublishedTopic.value=rs.data.data.testPaperNotStatusCount;
    //已发布题目
    publishedTopics.value=rs.data.data.subjectIsStatusCount;
    //未发布试卷
    unpublishedTestPapers.value=rs.data.data.testPaperNotStatusCount;
    //已发布试卷
    publishedPapers.value=rs.data.data.testPaperIsStatusCount;
  })

})



</script>

<style>
.QuickEntry:hover {
  background-color: #F8F8F8;
}

.hover {
  height: 40px;
}

.hover a {
  line-height: 40px;
  display: inline-block;
}

.el-card a {
  text-decoration: none;
  /* 去除默认的下划线 */
  color: #333333
}

.hover a:hover {
  background-color: #F8F8F8;
  color: #1485FE;
  transition: 0.5s;

}

.lib-comp-rect1 {
  margin-top: 20px;
}




.course {
  margin-right: 10px;
  text-align: center;
}

.h3 {
  margin: 0px;
  color: #1485FE;
  font-size: 35px;
  font-family: Helvetica;
}

.all {
  margin: 0px;
  color: #333333;
}



.box-card {
  margin-top: 40px;
  margin-right:20px;
  border-radius: 10px;
}

</style>